//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin list-view-helpers() {
    /* ==========================================================================
       List view

    //== Design Properties
    //## Helper classes to change the look and feel of the component
    ========================================================================== */

    // List items lined
    .listview-lined.mx-listview {
        & > ul > li {
            border-top: 1px solid $grid-border-color;

            &:first-child {
                border-top: 1px solid $grid-border-color;
            }

            &:last-child {
                border-bottom: 1px solid $grid-border-color;
            }
        }
    }

    //List items Bordered
    .listview-bordered.mx-listview {
        & > ul > li {
            border: 1px solid $grid-border-color;
            border-top: 0;

            &:first-child {
                border-top: 1px solid $grid-border-color;
            }

            &:last-child {
            }
        }
    }

    // List items striped
    .listview-striped.mx-listview {
        & > ul > li:nth-child(2n + 1) {
            background-color: $grid-bg-striped;
        }
    }

    // Items as seperated blocks
    .listview-seperated.mx-listview {
        & > ul > li {
            margin-bottom: $spacing-medium;
            border: 1px solid $grid-border-color;
            border-radius: $border-radius-default;
        }
    }

    // Remove all styling - deprecated
    .listview-stylingless.mx-listview {
        & > ul > li {
            padding: unset;
            cursor: default;
            border: unset;
            background-color: transparent;

            &:hover,
            &:focus,
            &:active {
                background-color: transparent;
            }

            &.selected {
                background-color: transparent !important;

                &:hover,
                &:focus,
                &:active {
                    background-color: transparent !important;
                }
            }
        }
    }

    // Hover style activated
    .listview-hover.mx-listview {
        & > ul > li {
            cursor: pointer;

            &:hover,
            &:focus,
            &:active {
                background-color: $grid-bg-hover;
            }

            &.selected {
                &:hover,
                &:focus,
                &:active {
                    background-color: $grid-bg-selected-hover;
                }
            }
        }
    }

    // Row Sizes

    .listview-sm.mx-listview {
        & > ul > li {
            padding: $spacing-small;
        }
    }

    .listview-lg.mx-listview {
        & > ul > li {
            padding: $spacing-large;
        }
    }

    // Bootstrap columns
    .mx-listview[class*="lv-col"] {
        overflow: hidden; // For if it is not in a layout, to prevent scrollbars
        & > ul {
            display: flex; // normal a table
            flex-wrap: wrap;
            margin-right: -1 * $gutter-size;
            margin-left: -1 * $gutter-size;

            &::before,
            &::after {
                // clearfix
                display: table;
                clear: both;
                content: " ";
            }

            & > li {
                // bootstrap col
                position: relative;
                min-height: 1px;
                padding-right: $gutter-size;
                padding-left: $gutter-size;
                border: 0;
                @media (max-width: $screen-md-max) {
                    width: 100% !important;
                }

                & > .mx-dataview {
                    overflow: hidden;
                }
            }
        }

        &.lv-col-xs-12 > ul > li {
            width: 100% !important;
        }

        &.lv-col-xs-11 > ul > li {
            width: 91.66666667% !important;
        }

        &.lv-col-xs-10 > ul > li {
            width: 83.33333333% !important;
        }

        &.lv-col-xs-9 > ul > li {
            width: 75% !important;
        }

        &.lv-col-xs-8 > ul > li {
            width: 66.66666667% !important;
        }

        &.lv-col-xs-7 > ul > li {
            width: 58.33333333% !important;
        }

        &.lv-col-xs-6 > ul > li {
            width: 50% !important;
        }

        &.lv-col-xs-5 > ul > li {
            width: 41.66666667% !important;
        }

        &.lv-col-xs-4 > ul > li {
            width: 33.33333333% !important;
        }

        &.lv-col-xs-3 > ul > li {
            width: 25% !important;
        }

        &.lv-col-xs-2 > ul > li {
            width: 16.66666667% !important;
        }

        &.lv-col-xs-1 > ul > li {
            width: 8.33333333% !important;
        }

        @media (min-width: $screen-md) {
            &.lv-col-sm-12 > ul > li {
                width: 100% !important;
            }
            &.lv-col-sm-11 > ul > li {
                width: 91.66666667% !important;
            }
            &.lv-col-sm-10 > ul > li {
                width: 83.33333333% !important;
            }
            &.lv-col-sm-9 > ul > li {
                width: 75% !important;
            }
            &.lv-col-sm-8 > ul > li {
                width: 66.66666667% !important;
            }
            &.lv-col-sm-7 > ul > li {
                width: 58.33333333% !important;
            }
            &.lv-col-sm-6 > ul > li {
                width: 50% !important;
            }
            &.lv-col-sm-5 > ul > li {
                width: 41.66666667% !important;
            }
            &.lv-col-sm-4 > ul > li {
                width: 33.33333333% !important;
            }
            &.lv-col-sm-3 > ul > li {
                width: 25% !important;
            }
            &.lv-col-sm-2 > ul > li {
                width: 16.66666667% !important;
            }
            &.lv-col-sm-1 > ul > li {
                width: 8.33333333% !important;
            }
        }
        @media (min-width: $screen-lg) {
            &.lv-col-md-12 > ul > li {
                width: 100% !important;
            }
            &.lv-col-md-11 > ul > li {
                width: 91.66666667% !important;
            }
            &.lv-col-md-10 > ul > li {
                width: 83.33333333% !important;
            }
            &.lv-col-md-9 > ul > li {
                width: 75% !important;
            }
            &.lv-col-md-8 > ul > li {
                width: 66.66666667% !important;
            }
            &.lv-col-md-7 > ul > li {
                width: 58.33333333% !important;
            }
            &.lv-col-md-6 > ul > li {
                width: 50% !important;
            }
            &.lv-col-md-5 > ul > li {
                width: 41.66666667% !important;
            }
            &.lv-col-md-4 > ul > li {
                width: 33.33333333% !important;
            }
            &.lv-col-md-3 > ul > li {
                width: 25% !important;
            }
            &.lv-col-md-2 > ul > li {
                width: 16.66666667% !important;
            }
            &.lv-col-md-1 > ul > li {
                width: 16.66666667% !important;
            }
        }
        @media (min-width: $screen-xl) {
            &.lv-col-lg-12 > ul > li {
                width: 100% !important;
            }
            &.lv-col-lg-11 > ul > li {
                width: 91.66666667% !important;
            }
            &.lv-col-lg-10 > ul > li {
                width: 83.33333333% !important;
            }
            &.lv-col-lg-9 > ul > li {
                width: 75% !important;
            }
            &.lv-col-lg-8 > ul > li {
                width: 66.66666667% !important;
            }
            &.lv-col-lg-7 > ul > li {
                width: 58.33333333% !important;
            }
            &.lv-col-lg-6 > ul > li {
                width: 50% !important;
            }
            &.lv-col-lg-5 > ul > li {
                width: 41.66666667% !important;
            }
            &.lv-col-lg-4 > ul > li {
                width: 33.33333333% !important;
            }
            &.lv-col-lg-3 > ul > li {
                width: 25% !important;
            }
            &.lv-col-lg-2 > ul > li {
                width: 16.66666667% !important;
            }
            &.lv-col-lg-1 > ul > li {
                width: 8.33333333% !important;
            }
        }
    }
}
